<script>
	export default {
		name: 'DtMenu',
		props: {
			mini: false,
			selected: null,
			listData: {
				type: Array,
				default: function () {
					return [];
				},
			}
		},
		render(h) {
			let self = this;
			return h('div', { 'class': self.mini ? 'mini' : '' }, [
				//循环遍历
					self.listData.map(function (item, index) {
						//如果是第一层，需要添加DIV
						if (item.parentId === 0) {
							/*如果是简洁模式下，展开所有第一层*/
							if (self.mini) {
								item.isExpand = true
							}
							//创建VDOM对象
							return h('div', {
								'class': item.isSelected ? 'list-group selected' : 'list-group',
							}, [
								h('h1',
									{
										attrs: { title: item.text },
										on: {
											click: function () {
												if(!self.mini && !item.isSelected) {
													item.isSelected = true
													//闭合相邻节点
													self.listData.map(function (sitem, sindex) {
														if (index != sindex) {
															sitem.isSelected = false;
														}
													});
												}
											}
										}
									}, [
									h('i', 
									{
										'class': item.icon,
									})
								]),
								h('div', { 'class': 'list-wrap' },
									[
										h('h2', [
											h('i', { 'class': item.icon }),
											h('span', item.text),
											h('b', { 'class': 'iconfont icon-arrow-down' })
										]
										),
										item.children && item.children.length > 0 ? self.elements(item, item, item.children, h) : null
									]
								)
							]);
						}
					})
				]);
		},
		methods: {
			elements(rootItem, parentItem, sData, h) {
				var self = this;
				return h('transition', { attrs: { name: 'slide' } },
				[
					h('ul',
					{
						directives: [{ name: 'show', value: !self.mini && parentItem.parentId===0 ? true : parentItem.isExpand }],
					}, [
						//循环遍历
						sData.map(function (item, index) {
							return h('li', [
								h('a', {
									'class': item.children.length == 0 && item.isSelected ? 'selected' : null,
									/*attrs: {
										'href': !!item.href ? item.href : 'javascript:;',
									},*/
									on: {
										click: function (e) {
											//console.log('单击了菜单，子菜单状态：' + item.children.length)
											if (item.children.length == 0) {
												//console.log('选中菜单' + item.id)
												localStorage.setItem('qianyi_admin_menu_url', item.href);//存入本地
												self.selectItem(self.listData, rootItem, item);
												//跳转页面
												if(!!item.href) {
													self.$router.push(item.href);
												}
											}
											if ((item.children.length == 0) || typeof (item.isExpand) === "undefined") {
												return false;
											}
											item.isExpand = !item.isExpand
											if (item.isExpand) {
												sData.map(function (sitem, sindex) {
													if (index != sindex) {
														sitem.isExpand = false;
													}
												})
											}
										},
									},
								}, [
									h('i', { 'class': !!item.icon ? item.icon : item.children.length > 0 ? 'iconfont icon-folder' : 'iconfont icon-file' }),
									h('span', item.text),
									item.children.length > 0 ? h('b', { 'class': item.isExpand ? 'iconfont icon-open' : 'iconfont icon-close' }) : null,
								]),
								item.children && item.children.length > 0 ? self.elements(rootItem, item, item.children, h) : null
							])
						})
					])
				])
			},
			selectItem(sData, rootItem, currItem) {
				let self = this;
				sData.map(function (item) {
					item.isSelected = false
					if (currItem === item) {
						currItem.isSelected = true
						rootItem.isSelected = true
					} else {
						item.isSelected = false
					}
					if (item.children && item.children.length > 0) {
						self.selectItem(item.children, rootItem, currItem)
					}
				})
			},
			selectUrl(sData, href) {
				let self = this;
				sData.map((item) => {
					if (item.children.length == 0 && item.href == href) {
						//console.log('找到菜单...' + item.href)
						//选中当前节点
						item.isSelected = true
						//跳转链接
						if (!!item.href && item.href != '#') {
							self.$router.push(item.href);
						}
						//查找所有的父节点
						let parentNodes = self.findAllParent(item, self.listData, [], 0);
						parentNodes.map((pNode) => {
							if (pNode.parentId === 0) {
								pNode.isSelected = true
								pNode.isExpand = true
							} else {
								pNode.isExpand = true
							}
						})
						//查找相邻的父节点，闭合
						if(parentNodes.length > 0) {
							let adjoinList = self.findAdjoin(self.listData, parentNodes[0].parentId);
							if(adjoinList) {
								adjoinList.map((node) => {
									if(node.id != item.parentId) {
										node.isExpand = false
									}
								})
							}
						}
					} else {
						//item.isExpand = false
						item.isSelected = false
					}
					if (item.children && item.children.length > 0) {
						self.selectUrl(item.children, href)
					}
				})
			},
			//查找所有父节点
			findAllParent(node, tree, parentNodes, index) {
				let self = this
				if (!node || node.parentId === 0) {
					return
				}
				self.findParent(node, parentNodes, tree)
				let parntNode = parentNodes[index]
				self.findAllParent(parntNode, tree, parentNodes, ++index)
				return parentNodes
			},
			//查找父节点
			findParent(node, parentNodes, tree) {
				let self = this
				for (let i = 0; i < tree.length; i++) {
					let item = tree[i]
					if (item.id === node.parentId) {
						parentNodes.push(item)
						return
					}
					if (item.children && item.children.length > 0) {
						self.findParent(node, parentNodes, item.children)
					}
				}
			},
			//查找所有相邻的节点
			findAdjoin(tree, parentId) {
				let self = this
				for (let i = 0; i < tree.length; i++) {
					let item = tree[i]
					if (item.id === parentId) {
						return item.children
					}
					if (item.children && item.children.length > 0) {
						self.findAdjoin(item.children, parentId)
					}
				}
			},
			//渲染完成后初始化菜单
			initData() {
				let self = this;
				let href = localStorage.getItem('qianyi_admin_menu_url');
				//先展开一级菜单下的所有第一个子节点
				self.listData.map((node) => {
					if(node.children && node.children[0]) {
						node.children[0].isExpand = true;
					}
				});
				if (self.selected) {
					//选中指定的菜单
					self.selectUrl(self.listData, self.selected);
				} else if (!!href) {
					//选中本地的菜单
					self.selectUrl(self.listData, href);
				}else if (!self.mini && self.listData[0]){
					self.listData[0].isSelected = true;
				}
			},
		},
		watch: {
			mini(newVal) {
				let self = this;
				if (!newVal && self.listData.length > 0) {
					const nodeObj = self.listData.find(item => item.isSelected);
					if(nodeObj){
						nodeObj.isSelected = true;
					}else{
						self.listData[0].isSelected = true;
					}
				}
			},
			//正确给listData赋值的方法
			listData(newVal) {
				let self = this;
				if (newVal) {
					self.initData();
				}
			},
		}
	}
</script>

<style lang="scss">
	/*导航普通样式*/
	.sidebar-nav {
		height: 100%;
		padding-top: 8px;
		background: #fff;
		overflow: hidden;
		.list-group{
			display: block !important;
			margin: 0;
			padding: 0 5px 8px;
			width: 44px;
			height: 44px;
			&.selected,&:hover {
				h1 {
					background: #0e70d5;
					border-radius: 4px;
					i {
						color: #f3f3f3;
					}
				}
			}
			&.selected {
				.list-wrap {
					display: block;
				}
			}
			.list-wrap {
				display: none;
				position: absolute;
				top: 0;
				left: 46px;
				bottom: 0;
				padding: 0 10px;
				width: 160px;
				background: #fff;
				box-shadow: 0 2px 12px 0 rgba(0,0,0,.1);
				z-index: 3;
				overflow: auto;
				> ul {
					margin-left: 0;
				}
			}
			h1 {
				display: block;
				margin: 0;
				padding: 10px;
				width: 16px;
				height: 16px;
				line-height: 14px;
				font-weight: 500;
				cursor: pointer;
				-webkit-transition-duration: 0.5s;
				transition-duration: 0.5s;
				overflow: hidden;
				i {
					display: inline-block;
					color: #0e70d5;
					font-size: 16px;
					vertical-align: top;
				}
			}
			h2 {
				position: relative;
				display: block;
				margin: 0 -10px;
				padding: 0 10px;
				color: #606266;
				font-size: 14px;
				font-weight: 500;
				line-height: 46px;
				height: 46px;
				cursor: pointer;
				box-shadow: 0px 1px 1px 0px rgba(0,0,0,.05);
				background: #fff;
				i {
					display: inline-block;
					margin-right: 5px;
					color: #0e70d5;
					font-size: 14px;
					vertical-align: baseline;
				}
				b {
					position: absolute;
					display: block;
					top: 15px;
					right: 10px;
					width: 20px;
					height: 20px;
					color: #c0c0c0;
					font-size: 10px;
					text-align: center;
					line-height: 20px;
				}
			}
			ul {
				margin-left: 17px;
				li {
					padding: 1px 0;
					a {
						position: relative;
						display: block;
						padding: 8px 20px 8px 8px;
						color: #606266;
						font-size: 14px;
						height: 20px;
						line-height: 20px;
						cursor: pointer;
						white-space: nowrap;
						text-overflow: ellipsis;
						text-decoration: none;
						-webkit-transition-duration: 0.5s;
						transition-duration: 0.5s;
						overflow: hidden;
						&.selected, &:hover {
							text-decoration: none;
							border-radius: 4px;
							color: #f3f3f3;
							>i, >b {
								color: #f3f3f3;
							}
						}
						&.selected {
							background: #0e70d5;
						}
						&:hover {
							background: #0b62b9;
						}
						> i {
							display: block;
							float: left;
							margin: 3px 5px 3px 0;
							width: 14px;
							height: 14px;
							color: #0e70d5;
							font-size: 14px;
							line-height: 14px;
							text-align: center;
							overflow: hidden;
						}
						> b {
							position: absolute;
							display: block;
							top: 11px;
							right: 4px;
							width: 14px;
							height: 14px;
							color: #0e70d5;
							font-size: 12px;
							text-align: center;
							line-height: 14px;
							-webkit-transform: scale(0.833);
						}
					}
				}
			}
		}
	}
	/*导航迷你样式*/
	.sidebar-nav.mini {
		box-shadow: 0 2px 5px 0 rgba(0,0,0,.1);
		margin-right: 1px;
		.list-group {
			&.selected {
				.list-wrap {
					display: none;
				}
			}
			&:hover {
				h1 {
					background: #0e70d5;
					border-radius: 4px;
				}
				.list-wrap {
					display: block;
				}
			}
		}
	}
</style>